{% extends 'mac_basic.html' %}


{% block title %}
    新增产品
{% endblock %}


{% block css %}
     <style>
        .form {
            width: 500px;
            margin-top: 51px ;
            margin-left: 150px;
        }
        .form-group {
                margin-bottom: 25px;
        }
        .error_span {
            position: absolute;
            color: red;
        }
        .help_text {
            padding-left: 0px;
            padding-top: 10px;
        }
        #product_title {
            border-bottom: 3px solid #8B8989;
            padding-left: 200px;
        }
        #id_a {
            margin-top: 20px;
            margin-left: 20px;
        }
    </style>
{% endblock %}


{% block content %}
    <div id="id_a"><a class="btn btn-default" href="{% url 'product_list' %}" role="button">返回</a></div>

    <div id="product_title">
        {% if pid %}
            <h3>修改<small> 产品</small></h3>
        {% else %}
            <h3>新增<small> 产品</small></h3>
        {% endif %}
    </div>
    <div class="form">
        {% if pid %}
            <form method="post" action="{% url 'product_edit' pid %}" class="form-horizontal" novalidate>
        {% else %}
            <form method="post" action="{% url 'product_add' %}" class="form-horizontal" novalidate>
        {% endif %}
            {% for obj in products_form %}
                <div class="form-group">
                    <label for="mac_id" class="col-sm-3 control-label">{{ obj.label_tag }}</label>
                    <div class="col-sm-8">
                        {{ obj }}
                        <span class="error_span" id="error_mac">{{ obj.errors }}</span>
                    </div>
                    <span class="help_text error_span">{{ obj.help_text }}</span>
                </div>
            {% endfor %}
            <div id="submit_checkbox" class="form-group">
                <label for="mac_id" class="col-sm-3 control-label">确定无误</label>
                <div class="checkbox col-sm-8">
                  <input type="checkbox" style="margin-left: 0">
                  <span style="color: red; margin-left: 24px;">确保被标记控制的字段所填信息无误再点击,否则 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;将删除原有信息</span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-3">
                    <input  class="form-control btn btn-info" type="submit" value="确定" disabled="disabled">
                </div>
            </div>
        </form>
    </div>
{% endblock %}


{% block js %}
    <script>
        var mark_val = $('#id_mark1').val();
        var $Ele_mqtt = $('#id_mqtt');
        var $Ele_device_id = $('#id_device_id');
        var $Ele_device_id_pwd = $('#id_device_id_pwd');
        var $Ele_address = $('#id_address');
        var $Ele_pubkey = $('#id_pubkey');
        var $Ele_endpoint_host = $('#id_endpoint_host');
        var $Ele_endpoint_port = $('#id_endpoint_port');
        if (mark_val === '1') {
            $Ele_mqtt.parents('.form-group').hide();
            $Ele_device_id.parents('.form-group').hide();
            $Ele_device_id_pwd.parents('.form-group').hide();
            $Ele_address.parents('.form-group').hide();
            $Ele_pubkey.parents('.form-group').hide();
            $Ele_endpoint_host.parents('.form-group').hide();
            $Ele_endpoint_port.parents('.form-group').hide();
        }else if (mark_val === '2') {
            $Ele_address.parents('.form-group').hide();
            $Ele_pubkey.parents('.form-group').hide();
            $Ele_endpoint_host.parents('.form-group').hide();
            $Ele_endpoint_port.parents('.form-group').hide();
        }else if (mark_val === '3') {
            $Ele_mqtt.parents('.form-group').hide();
            $Ele_device_id.parents('.form-group').hide();
            $Ele_device_id_pwd.parents('.form-group').hide();
        }
        $('#id_mark1').on('keyup mouseup',function () {
            var mark_val = $(this).val();
            if (mark_val === '1'){
                $Ele_device_id.parents('.form-group').slideUp("slow");
                $Ele_mqtt.parents('.form-group').slideUp("slow");
                $Ele_device_id_pwd.parents('.form-group').slideUp("slow");
                $Ele_address.parents('.form-group').slideUp("slow");
                $Ele_pubkey.parents('.form-group').slideUp("slow");
                $Ele_endpoint_host.parents('.form-group').slideUp("slow");
                $Ele_endpoint_port.parents('.form-group').slideUp("slow");
            }else if (mark_val === '2') {
                $Ele_device_id.parents('.form-group').slideDown("slow");
                $Ele_mqtt.parents('.form-group').slideDown("slow");
                $Ele_device_id_pwd.parents('.form-group').slideDown("slow");
                $Ele_address.parents('.form-group').slideUp("slow");
                $Ele_pubkey.parents('.form-group').slideUp("slow");
                $Ele_endpoint_host.parents('.form-group').slideUp("slow");
                $Ele_endpoint_port.parents('.form-group').slideUp("slow");
            }else if (mark_val === '3') {
                $Ele_device_id.parents('.form-group').slideUp("slow");
                $Ele_mqtt.parents('.form-group').slideUp("slow");
                $Ele_device_id_pwd.parents('.form-group').slideUp("slow");
                $Ele_address.parents('.form-group').slideDown("slow");
                $Ele_pubkey.parents('.form-group').slideDown("slow");
                $Ele_endpoint_host.parents('.form-group').slideDown("slow");
                $Ele_endpoint_port.parents('.form-group').slideDown("slow");
            }else if(mark_val === '4') {
                $Ele_device_id.parents('.form-group').slideDown("slow");
                $Ele_mqtt.parents('.form-group').slideDown("slow");
                $Ele_device_id_pwd.parents('.form-group').slideDown("slow");
                $Ele_address.parents('.form-group').slideDown("slow");
                $Ele_pubkey.parents('.form-group').slideDown("slow");
                $Ele_endpoint_host.parents('.form-group').slideDown("slow");
                $Ele_endpoint_port.parents('.form-group').slideDown("slow");
            }else {
                $('#id_mark1').val('');
            }
        })
        var click_nums = 0;
        $('#submit_checkbox input[type=checkbox]').click(function () {
            click_nums += 1;
            var $submit = $('input[type=submit]');
            var $input = $('input[type!="submit"]');
            if (click_nums%2 === 0){
                $submit.attr('disabled', 'disabled');
                $input.removeAttr('readonly')
            }else {
                $submit.removeAttr('disabled');
                $input.attr('readonly', 'readonly');
                $.each($('input:hidden'), function (index, Ele) {
                    $(Ele).val(null)
                })
            }
        })
        var $errorMac =　$('.error_span')
        $errorMac.prev().focus(function () {
            $(this).next().text(null)
        })
    </script>
{% endblock %}
